<!-- 页面说明 -->
<template>
  <main class="page-main">
    <div class="margin-left-40">
      <icon   :icon-name="name" class="font-size-24"></icon>
      <a-button type="link"  @click="showIconSelector = !showIconSelector">
        <template #icon>
          <UpOutlined v-if="showIconSelector" />
          <DownOutlined v-else />
        </template>
        {{showIconSelector ? '收起' : '选择'}}图标</a-button>
    </div>


    <sys-icon v-if="showIconSelector" :hideNote="true" @changed="handleIconChanged"></sys-icon>

  </main>
</template>
<script lang="ts">
import {DownOutlined, UpOutlined} from "@ant-design/icons-vue";
import sysIcon from "@/views/sysIcon/index.vue";
import icon from "@/components/Icon.vue"

export default {
  props:{
    iconName:{type:String}
  },
  components: {
    icon,
    sysIcon,
    DownOutlined, UpOutlined

  },
  data() {
    return {
      name:"",
      showIconSelector:false
    }
  },
  methods: {
    handleIconChanged(name){
      this.name = name;
      this.$emit("changed",name);
      this.showIconSelector = false;
    }
  },
  computed: {

  },
  watch: {

  },
  mounted() {
    this.name = this.$props.iconName;
  }
}
</script>
<style scoped>

</style>